<template>
  <div class="excelView">
    <header class="header">
      <el-button size="small" type="primary" @click="changeShow">筛选</el-button>
    </header>
    <div v-loading="loading" class="excelBox" :style="'height' + tableClientHeight">
      <el-row class="table-header">
        <el-col :span="1">
          <div class="th table1">序号</div>
        </el-col>
        <el-col :span="2">
          <div class="th table2">专业分类</div>
        </el-col>
        <el-col :span="2">
          <div class="th table3">工艺项目</div>
        </el-col>
        <el-col :span="2">
          <div class="th table4">分级</div>
        </el-col>
        <el-col :span="3">
          <div class="th table5">禁（限）用工艺内容</div>
        </el-col>
        <el-col :span="3">
          <div class="th table6">禁（限）用原因</div>
        </el-col>
        <el-col :span="3">
          <div class="th table7">应采取的措施</div>
        </el-col>
        <el-col :span="2">
          <div class="th table8">编制依据</div>
        </el-col>
        <el-col :span="2">
          <div class="th table9">来源</div>
        </el-col>
        <el-col :span="2">
          <div class="th table10">应用说明</div>
        </el-col>
        <el-col :span="2">
          <div class="th table11">参考图片</div>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24" v-if="rowParagraphs && rowParagraphs.length === 0">
          <p class="empty">暂无数据</p>
        </el-col>
      </el-row>

      <el-row v-for="(item, index) in rowParagraphs" :key="'uni-card' + index">
        <el-col :span="1">
          <div class="td table1">{{ item.texts[0] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="td table2">{{ item.texts[1] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="td table3" :title="item.texts[2]">{{ item.texts[2] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="td table4" :title="item.texts[3]">{{ item.texts[3] }}</div>
        </el-col>
        <el-col :span="3">
          <div class="td table5" :title="item.texts[4]">{{ item.texts[4] }}</div>
        </el-col>
        <el-col :span="3">
          <div class="td table6" :title="item.texts[5]">{{ item.texts[5] }}</div>
        </el-col>
        <el-col :span="3">
          <div class="td table7" :title="item.texts[6]">{{ item.texts[6] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="td table8" :title="item.texts[7]">{{ item.texts[7] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="td table9" :title="item.texts[8]">{{ item.texts[8] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="td table10" :title="item.texts[9]">{{ item.texts[9] }}</div>
        </el-col>
        <el-col :span="2">
          <div class="td table11 img">
<!--            <img v-for="(ima, k) in item.related_images" :key="'ima'+k" :src="ima" width="100px"/>-->
            <div v-if="item.related_images && item.related_images.length > 0">
              <el-image
                style="width: 100px; height: 100px"
                :src="`${baseUrl}${item.related_images[0]}`"
                :preview-src-list="item.previewImages">
              </el-image>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="筛选"
      :visible.sync="show"
      append-to-body
      custom-class="el-dialog-self"
      width="70%"
      center>
      <div class="dialogBox">
        <el-input placeholder="请输入搜索内容" v-model="value" class="input-with-select">
          <el-select v-model="rangeValue" slot="prepend" placeholder="请选择" @change="filterRowParagraphs" class="filterRowClass">
            <el-option v-for="(item,index) in range" :key="'option'+index" :label="item.text" :value="item.value">{{item.text}}</el-option>
          </el-select>
        </el-input>

        <div class="checkboxTop">
          <el-checkbox-group v-model="checkAll" @change="handleCheckAll">
            <el-checkbox label="1">全选</el-checkbox>
          </el-checkbox-group>
          <el-checkbox-group v-model="inverse" @change="handleInverse">
            <el-checkbox label="1">反选</el-checkbox>
          </el-checkbox-group>
        </div>

        <div class="checkboxBottom">
          <el-checkbox-group v-model="checked" @change="handleCheckedList" class="checkboxs">
            <el-checkbox v-for="(value, key, index) in checkedList" :key="'checkbox'+index"
                        :label="key">{{key + '(' + value + ')'}}</el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="emptyFn">清 空</el-button>
        <el-button type="primary" @click="sureFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'excelView',
  data() {
    return {
      loading: false,
      id: '',
      value: '',
      show: false, //筛选弹窗
      rangeValue: null,
      rangeLabel: '',
      range: [],
      rowParagraphs: [],
      jsonData: {
        content: [],
        metadata: {}
      },
      headerArray: [],
      checked: [],
      checkAll: [],
      inverse: [],
      checkedList: {},
      baseUrl: this.$config.VUE_APP_BASE_API,
      isEmpty: false
    }
  },
  computed: {
    tableClientHeight() {
      let tableClientHeight = document.documentElement.clientHeight || document.body.clientHeight
      tableClientHeight = tableClientHeight - 280
      return tableClientHeight
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id
      this.getInfo()
    }
  },
  methods: {
    getInfo() {
      this.loading = true
      this.$http({
        url: '/knowledgeData/video/verification',
        method: 'get',
        params: {
          id: this.id,
        },
      }).then(({ data }) => {
        this.jsonData = JSON.parse(data.data.videoJson)
        this.headerArray = data.data.headerArray
        this.filterFn()

      }).finally(() => {
        this.loading = false
      })
    },
    changeShow() {
      this.show = true
    },
    emptyFn() {
      this.value = ''
      this.checkAll = []
      this.inverse = []
      this.checked = []
      this.rangeValue = null
      this.rangeLabel = ''
      this.checkedList = {}
      this.isEmpty = true
    },
    sureFn() {
      this.loading = true
      if (this.isEmpty) {
        this.getInfo()
        this.show = false
        this.isEmpty = false
        return
      }
      this.$http({
        url: '/knowledgeData/getSearchJson',
        method: 'post',
        data: {
          id: this.id,
          filterList: this.checked,
          search: this.value,
          title: this.rangeLabel
        },
      }).then(({ data }) => {
        this.isEmpty = false
        this.show = false
        this.jsonData = JSON.parse(data.data.videoJson)
        this.rowParagraphs = this.jsonData.content[0].row_paragraphs
        this.rowParagraphs.forEach(item => {
          item.previewImages = item.related_images.map(img => this.baseUrl + img)
        })
      }).finally(() => {
        this.loading = false
      })
    },

    filterFn() {
      let arr = []
      this.headerArray.forEach((item, index) => {
        arr.push({
          value: index,
          text: item.name
        })
      })
      this.range = arr
      this.rowParagraphs = this.jsonData.content[0].row_paragraphs
      this.rowParagraphs.forEach(item => {
        item.previewImages = item.related_images.map(img => this.baseUrl + img)
      })
      console.log('rowParagraphs', this.rowParagraphs)
    },
    filterRowParagraphs() {
      this.range.forEach(item => {
        if (item.value === this.rangeValue) {
          this.rangeLabel = item.text
        }
      })
      this.checkedList = this.headerArray[this.rangeValue].count
    },
    //全选
    handleCheckAll() {
      this.$nextTick(() => {
        this.inverse = []
        if (this.checkAll.toString() === '') {
          this.checked = []
        } else {
          Object.keys(this.checkedList).forEach(key => {
            this.checked.push(key)
          })
        }
      })
    },
    //反选
    handleInverse() {
      this.$nextTick(() => {
        let temp = []
        Object.keys(this.checkedList).forEach(key => {
          if (!this.checked.some(item => item === key)) {
            temp.push(key)
          }
        })
        this.checked = temp
        this.handleCheckedList()
      })
    },
    handleCheckedList() {
      this.$nextTick(() => {
        if (this.checked.length === Object.keys(this.checkedList).length) {
          this.checkAll = ['1']//全选
        } else {
          this.checkAll = []//不选
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.excelView {
  width: 98%;
  height: 96%;
  background: white;
  border-radius: 10px;
  padding: 20px 20px;
  overflow-y: auto;
  margin: 1%;
  .excelBox{
    border-right: 1px solid #dfe6ec;
    border-bottom: 1px solid #dfe6ec;
    ::v-deep .el-row{
      display: flex;
    }
  }
  .header{
    width: 100%;
    text-align: right;
    height: 40px;
  }
  ::v-deep .el-col{
    border-top: 1px solid #dfe6ec;
    border-left: 1px solid #dfe6ec;
  }
  .th{
    word-break: break-word;
    background-color: #f8f8f9;
    color: #515a6e;
    min-height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 13px;
  }
  .empty{
    text-align: center;
    font-size: 13px;
    color: #515a6e;
  }
  .td{
    font-size: 14px;
    color: #606266;
    min-height: 40px;
    line-height: 40px;
    padding: 0 12px;
    width: calc(100% - 1px);
    overflow: hidden;
    white-space: nowrap;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    text-align: left;
    &.img{
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.el-dialog-self{
  .filterRowClass{
    width: 180px;
  }
  .checkboxTop{
    display: inline-grid;
    grid-column-gap: 10px;
    width: 100%;
    grid-template-columns: 60px 60px;
    border-bottom: 1px solid #D8D8D8;
    height: 40px;
    line-height: 40px;
  }

  .checkboxBottom{
    max-height: 50vh;
    overflow-y: auto;
    .checkboxs{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      ::v-deep .el-checkbox__label{
        min-height: 30px;
        line-height: 30px;
        white-space: pre-wrap;
      }
    }
  }
}
</style>
